/*------------------------------------*
    #DATAGRID
/*------------------------------------*

.datagrid
  min-height: 100%

.datagrid-view
  position: relative
  overflow: hidden

.datagrid-view1,
.datagrid-view2
  position: absolute
  overflow: hidden
  top: 0

.datagrid-view1
  left: 0

.datagrid-view2
  right: 0

.datagrid-mask
  position: absolute
  left: 0
  top: 0
  width: 100%
  height: 100%
  +opacity(0.3)
  display: none

.datagrid-mask-msg
  position: absolute
  top: 50%
  display: none
  width: auto
  height: 16px
  margin-top: -20px
  padding: 10px 5px 10px 30px
  border-width: 2px
  border-style: solid

.datagrid-toolbar
  height: auto

.datagrid-btn-separator
  float: left
  height: 24px
  border-left: 1px solid #ccc
  border-right: 1px solid #fff
  margin: 2px 1px

.datagrid .datagrid-pager
  display: block
  margin: 0

.datagrid .datagrid-pager-top
  border-width: 0 0 1px 0

.datagrid-header
  overflow: hidden
  cursor: default
  border-width: 0 0 1px 0
  border-style: solid

.datagrid-header-inner
  float: left
  width: 10000px

.datagrid-header-row,
.datagrid-row
  height: 25px

.datagrid-header td,
.datagrid-body td,
.datagrid-footer td
  border-width: 0 1px 1px 0
  border-style: dotted
  margin: 0
  padding: 0

.datagrid-cell,
.datagrid-cell-group,
.datagrid-header-rownumber,
.datagrid-cell-rownumber
  margin: 0
  padding: 0 4px
  font-size: 12px
  white-space: nowrap

.datagrid-header .datagrid-cell
  height: auto

.datagrid-header .datagrid-cell span
  font-size: 12px

.datagrid-cell-group
  text-align: center

.datagrid-header-rownumber,
.datagrid-cell-rownumber
  width: 25px
  text-align: center
  margin: 0
  padding: 0

.datagrid-body
  margin: 0
  padding: 0
  overflow: auto
  zoom: 1

.datagrid-view1 .datagrid-body-inner
  padding-bottom: 20px

.datagrid-view1 .datagrid-body
  overflow: hidden

.datagrid-footer
  overflow: hidden

.datagrid-footer-inner
  float: left
  width: 10000px
  border-width: 1px 0 0 0
  border-style: solid

.datagrid-row-editing .datagrid-cell
  height: auto

.datagrid-header-check,
.datagrid-cell-check
  width: 27px
  height: 18px
  padding: 0
  font-size: 1px
  text-align: center
  overflow: hidden

.datagrid-header-check input,
.datagrid-cell-check input
  width: 15px
  height: 18px
  margin: 0
  padding: 0

.datagrid-resize-proxy
  position: absolute
  top: 0
  display: none
  width: 1px
  height: 10000px
  cursor: e-resize

.datagrid-body .datagrid-editable
  margin: 0
  padding: 0

.datagrid-body .datagrid-editable table
  width: 100%
  height: 100%

.datagrid-body .datagrid-editable td
  border: 0
  margin: 0
  padding: 0

.datagrid-view .datagrid-editable-input
  margin: 0
  padding: 2px 4px
  font-size: 12px
  +border-radius(0)
  color: #555
  background-color: $textbox-bg-color
  border: none
  +transition(background-color, 0.28s, ease-out)
  &:focus
    background-color: #d7d7d7
    color: #000
    outline: none
    +transition(background-color, 0.28s, ease-in)

.datagrid-sort-icon
  float: right

.datagrid-sort-desc
  & .datagrid-sort-icon
    &::before
      +font-icons(FontAwesome, '\f0d7', inherit, #000)

.datagrid-sort-asc
  & .datagrid-sort-icon
    &::before
      +font-icons(FontAwesome, '\f0d8', inherit, #000)

.datagrid-row-collapse
  &::before
    +font-icons(FontAwesome, '\f146', inherit, #000)

.datagrid-row-expand
  &::before
    +font-icons(FontAwesome, '\f0fe', inherit, #000)

.datagrid-mask
  background-color: #ccc

.datagrid-mask-msg
  border-color: #fff
  background-color: #fff
  padding: $padding-large-vertical $padding-large-horizontal
  +box-shadow (0 8px 17px 0 rgba(0,0,0,.2),0 6px 20px 0 rgba(0,0,0,.19))

.datagrid-mask-msg
  &::before
    +inline-block()
    margin-right: 10px
    +font-icons(FontAwesome, '\f110', 20px, #000)
    +animation (fa-spin 1s infinite steps(8))

.datagrid-header,
.datagrid-td-rownumber
  background-color: $datagrid-header-color

.datagrid-cell-rownumber
  color: #000

.datagrid-resize-proxy
  background-color: #aac5e7

.datagrid-toolbar,
.datagrid-pager
  background-color: #D7D7D7

.datagrid-header,
.datagrid-toolbar,
.datagrid-pager,
.datagrid-footer-inner
  border-color: #ddd

.datagrid-header td,
.datagrid-body td,
.datagrid-footer td
  border-color: #ccc

//It's added for hide to empty row
.datagrid-body td
  overflow: hidden

.datagrid-htable,
.datagrid-btable,
.datagrid-ftable
  color: #000
  border-collapse: separate

.datagrid-row-alt
  background-color: #fafafa

.datagrid-row-over,
.datagrid-header td.datagrid-header-over
  background-color: darken(#fff, 10%)
  cursor: default
  +transition(background-color, 0.2s, ease-out)

.datagrid-row-selected
  background-color: #C8CCDA
  +transition(background-color, 0.2s, ease-in)

.datagrid-row-editing .textbox,
.datagrid-row-editing .textbox-text
  +border-radius(0)
